<template>
  <div class="page">
    <div class="head"></div>
    <div class="content">
      <div class="leftPage">
        <div class="leftPageTop">
          <p class="titlePClass" style="margin-left:20%">数据统计</p>
          <div class="topStatisticDiv" style="margin-left:10%">
            <div class="singleStatisticDiv" @click="toViewDataStatistic(1)">
              <img src="../../../assets/safeControlCabin/zhengfu.png">
              <div class="statisticsInfo">
                <p class="title">政府安全检查/当年</p>
                <p class="num">{{ statisticsInfos.totalSaInspect2 }}</p>
              </div>
            </div>
            <div class="singleStatisticDiv" @click="toViewDataStatistic(2)">
              <img src="../../../assets/safeControlCabin/zhongshang.png">
              <div class="statisticsInfo">
                <p class="title">重伤以上事故/当年</p>
                <p class="num">{{ statisticsInfos.dead }}</p>
              </div>
            </div>
          </div>
          <div class="bottomStatisticDiv" style="margin-left:10%">
            <div class="singleStatisticDiv" @click="toViewDataStatistic(3)">
              <img src="../../../assets/safeControlCabin/anquanxingzheng.png">
              <div class="statisticsInfo">
                <p class="title">安全行政处罚/当年</p>
                <p class="num">{{ statisticsInfos.furloughNum }}</p>
              </div>
            </div>
            <div class="singleStatisticDiv" @click="toViewDataStatistic(4)">
              <img src="../../../assets/safeControlCabin/tezhongzuoye.png">
              <div class="statisticsInfo">
                <p class="title">特种作业数量/当月</p>
                <p class="num">{{ statisticsInfos.zyxkNum }}</p>
              </div>
            </div>
          </div>
        </div>
        <div class="leftPageBottom">
          <p class="titlePClass" style="margin-top:8%">安全事故统计</p>
          <div ref="safeAccidentContainer" style="margin-top:30px;padding-left:7%" class="shiguStatisticDiv"></div>
        </div>
      </div>
      <div class="centerPage">
        <div class="centerPageHead">
          <div class="singleCenterPageHead">
            <div style="display:flex;justify-content: center;align-items: baseline">
              <p class="num">{{ centerStatisticInfo.missionNum }}</p>
              <p class="num" style="font-size: 0.9rem;">家</p>
            </div>
            <p class="title">安全审计</p>
          </div>
          <div class="singleCenterPageHead">
            <div style="display:flex;justify-content: center;align-items: baseline">
              <p class="num">{{ centerStatisticInfo.notNum }}</p>
              <p class="num" style="font-size: 0.9rem;">个</p>
            </div>
            <p class="title">待闭环问题</p>
          </div>
          <div class="singleCenterPageHead">
            <div style="display:flex;justify-content: center;align-items: baseline">
              <p class="num">{{ centerStatisticInfo.safeRptSuperviseInspectNum }}</p>
              <p class="num" style="font-size: 0.9rem;">个</p>
            </div>
            <p class="title">安全检查次数</p>
          </div>
          <div class="singleCenterPageHead">
            <div style="display:flex;justify-content: center;align-items: baseline">
              <p class="num">{{ centerStatisticInfo.safeRptInvestmentNum }}</p>
              <p class="num" style="font-size: 0.9rem;">万</p>
            </div>
            <p class="title">安全投入</p>
          </div>
        </div>
        <div class="centerPageCenter">
          <div class="centerPageCenterDialog" v-for="(item,index) in companyInfoLists" v-if="item.detail.show == true"
               @click="toHideDetail(index)"
               v-bind:style="{left:convertMain(item.value[0], item.value[1])[0]+'px',top:convertMain(item.value[0], item.value[1])[1]+'px'}">
            <div class="detailMap">
              <p class="company">{{ item.detail.companyName }}</p>
              <p class="title">危险作业：{{ item.detail.zyxkNum }}个</p>
              <p class="title">检维修：{{ item.detail.examNum }}个</p>
              <p class="title">事故次数：{{ item.detail.accidentNum }}个</p>
            </div>
            <img class="imgClass" src="../../../assets/safeControlCabin/safe.png"/>
          </div>
          <div class="centerPageCenterDialog" v-for="(item,index) in companyInfoLists"
               @click="toShowDetail(index)"
               v-else
               v-bind:style="{left:convertMain2(item.value[0], item.value[1])[0]+'px',top:convertMain2(item.value[0], item.value[1])[1]+'px'}">
            <img class="imgClass" src="../../../assets/safeControlCabin/safe.png"/>
          </div>
          <div style="width:100%;height:100%;flex-grow: 1" ref="mapContainer"></div>
        </div>
        <div class="centerPageFooter">
          <div class="centerPageFooterImg">
            <img @click="toViewVideo(1)" style="cursor:pointer;width:89px;height:57px"
                 src="../../../assets/safeControlCabin/1.png"/>
            <p>冀东水泥</p>
          </div>
          <div class="centerPageFooterImg">
            <img @click="toViewVideo(2)" style="cursor:pointer;width:89px;height:57px"
                 src="../../../assets/safeControlCabin/2.png"/>
            <p>混凝土集团</p>
          </div>
          <div class="centerPageFooterImg">
            <img @click="toViewVideo(3)" style="cursor:pointer;width:89px;height:57px"
                 src="../../../assets/safeControlCabin/3.png"/>
            <p>冀东集团</p>
          </div>
          <div class="centerPageFooterImg">
            <img @click="toViewVideo(4)" style="cursor:pointer;width:89px;height:57px"
                 src="../../../assets/safeControlCabin/4.png"/>
            <p>新材产业化集团</p>
          </div>
          <div class="centerPageFooterImg">
            <img @click="toViewVideo(6)" style="cursor:pointer;width:89px;height:57px"
                 src="../../../assets/safeControlCabin/6.png"/>
            <p>地产集团</p>
          </div>
          <div class="centerPageFooterImg">
            <img @click="toViewVideo(5)" style="cursor:pointer;width:89px;height:57px"
                 src="../../../assets/safeControlCabin/5.png"/>
            <p>投资物业集团</p>
          </div>
          <div class="centerPageFooterImg">
            <img @click="toViewVideo(7)" style="cursor:pointer;width:89px;height:57px"
                 src="../../../assets/safeControlCabin/7.png"/>
            <p>天津建材集团</p>
          </div>
          <div class="centerPageFooterImg">
            <img @click="toViewVideo(8)" style="cursor:pointer;width:89px;height:57px"
                 src="../../../assets/safeControlCabin/7.png"/>
            <p>科研总院</p>
          </div>
        </div>
      </div>
      <div class="rightPage">
        <div class="leftPageTop">
          <p class="titlePClass" style="margin-right:10%">安全风险四色图</p>
          <div ref="riskLevelContainer" class="shiguStatisticDiv"></div>
        </div>
        <div class="leftPageBottom">
          <p class="titlePClass" style="margin-top:8%;margin-left:10%">隐患排查统计</p>
          <div ref="hiddenDanger" class="shiguStatisticDiv"></div>
        </div>
      </div>
    </div>

    <Modal :title="hiddenDangerTitle" :transfer=false v-model="hiddenDangerVisible" :width=1600 footer-hide>
      <Table ref='table' :loading="loading" size="small" class="table" :height=800 no-data-text="没有查询到相关数据!"
             highlight-row stripe border :columns="hiddenDangerColumns" width="100%" :data="hiddenDangerInfo">
      </Table>
      <Page :total="pagedata.total" :current="pagedata.fromPage" :pageSize="pagedata.pageSize"
            @on-change="hdPageChange" @on-page-size-change='hdPageSizeChange' show-total show-sizer show-elevator/>
    </Modal>

    <Modal :title="riskLevelTitle" :transfer=false v-model="riskLevelVisible" :width=1200 footer-hide>
      <Menu mode="horizontal" @on-select='lowerStep' :active-name="modaleshow">
        <MenuItem :name="1">设备设施风险</MenuItem>
        <MenuItem :name="2">作业流程风险</MenuItem>
        <MenuItem :name="3">人员岗位风险</MenuItem>
        <MenuItem :name="4">环境氛围风险</MenuItem>
      </Menu>
      <Table :loading="loading" size="small" :height="500" class="table" no-data-text="没有查询到相关数据!"
             highlight-row stripe border :columns="riskLevelColumns" width="100%" :data="riskLevelInfo">
      </Table>
      <Page :total="pagedata.total" :current="pagedata.fromPage" :pageSize="pagedata.pageSize"
            @on-change="pageChangeRisk" @on-page-size-change='sizeChangeRisk' show-total show-sizer show-elevator/>
    </Modal>

    <Modal width="1200" footer-hide :transfer=false v-model="StatisticsVisible">
      <Tabs value="name1" ref="tabs">
        <TabPane :label="StatisticsTitle" name="name1">
          <Table ref='table' v-if="AQJCVisible" :loading="loading" size="small" class="table" :height=450
                 no-data-text="没有查询到相关数据!"
                 highlight-row stripe border :columns="AQJCColumn" width="100%" :data="dataTable">
          </Table>
          <Table ref='table' v-if="ZSSWVisible" :loading="loading" size="small" class="table" :height=450
                 no-data-text="没有查询到相关数据!"
                 highlight-row stripe border :columns="ZSSWColumn" @on-row-click="onExpand" width="100%"
                 :data="dataTable">
          </Table>
          <Table ref='table' v-if="AQXZVisible" :loading="loading" size="small" class="table" :height=450
                 no-data-text="没有查询到相关数据!"
                 highlight-row stripe border :columns="AQXZColumn" width="100%" :data="dataTable">
          </Table>
          <Table ref='table' v-if="TZZYVisible" :loading="loading" size="small" class="table" :height=450
                 no-data-text="没有查询到相关数据!"
                 highlight-row stripe border :columns="TZZYColumn" width="100%" :data="dataTable">
          </Table>
          <Table ref='table' v-if="AQSGVisible" :loading="loading" size="small" class="table" :height=450
                 no-data-text="没有查询到相关数据!"
                 highlight-row stripe border :columns="ZSSWColumn" @on-row-click="onExpand" width="100%"
                 :data="dataTable">
          </Table>
          <Page :total="pagedata.total" :page-size="pagedata.pageSize"
                @on-change="pageChange" @on-page-size-change='sizeChange' show-total show-sizer show-elevator/>
        </TabPane>
        <TabPane label="统计分析" v-if="TZZYVisible != true && ZDWRVisible != true && AQSGVisible != true" name="name2">
          <div ref="analysisContainer" style="width: 1200px; height: 500px"></div>
        </TabPane>
      </Tabs>
    </Modal>
  </div>
</template>
<script>

import echarts from 'echarts'
import 'echarts/map/js/china'
import 'echarts/map/js/province/beijing'
import 'echarts/map/js/province/hebei'
import 'echarts/map/js/province/tianjin'
import {Api} from '../../../api/index.js'
import {sessionStorage} from '@/common/cacheUtils.js';
import {formatDate} from '@/tools/index'
import pageCommonFunction from '@/components/pageCommonFunction.js'
import CryptoJS from "crypto-js";

export default {
  name: "safeControlCabin",
  data() {
    return {
      type: 1,
      dataTable: [],
      statisticsInfos: {},
      centerStatisticInfo: {},
      companyName: sessionStorage('userId').getObject('userId').companyName,
      companyInfoLists: [],
      mapCharts: null,
      mapChartOption: {},
      hiddenDangerContainer: null,
      safeAccidentContainer: null,
      riskLevelContainer: null,
      StatisticsTitle: "",
      ZDWRVisible: false,
      StatisticsVisible: false,
      AQSGVisible: false,
      hiddenDangerInfo: [],
      hiddenDangerTitle: "",
      hiddenDangerColumns: [
        {
          title: '序号', width: 80, fixed: 'left', align: 'center', render: (h, params) => {
            return h('span', params.index + (this.pagedata.fromPage - 1) * this.pagedata.pageSize + 1);
          }
        },
        {key: 'flowNo', title: '隐患流水号', fixed: 'left', align: 'center', minWidth: 200},
        {
          key: 'companyName', title: '排查对象', fixed: 'left', align: 'center', minWidth: 200, render: (h, params) => {
            return h('div', [
              h('span', params.row.parentOrgName + '>>' + params.row.projectname || '--')
            ]);
          }
        },
        {key: 'level', title: '隐患等级', align: 'center', minWidth: 120},
        {key: 'recPeriod', title: '期限（天）', align: 'center', minWidth: 120},
        {key: 'userName', title: '上报人', align: 'center', minWidth: 120},
        {key: 'governTimeStr', title: '上报时间', align: 'center', minWidth: 150},
      ],
      riskColumns: [
        {
          title: "序号",
          minWidth: 80,
          align: "center",
          fixed: 'left',
          render: (h, params) => {
            return h('span', params.index + 1);
          }
        },
        {
          minWidth: 150,
          title: '一级风险单元',
          fixed: 'left',
          align: 'center',
          render: (h, params) => {
            return h('span', params.row.saRiskInfo.riskUnitName)
          }
        },
        {
          minWidth: 120,
          title: '二级风险单元',
          fixed: 'left',
          align: 'center',
          render: (h, params) => {
            return h('span', params.row.saRiskInfo.riskUnit2)
          }
        },
        {
          minWidth: 100,
          title: '三级风险单元',
          fixed: 'left',
          align: 'center',
          render: (h, params) => {
            return h('span', params.row.saRiskInfo.riskUnit3)
          }
        }, {
          minWidth: 100,
          title: '四级风险单元',
          fixed: 'left',
          align: 'center',
          render: (h, params) => {
            return h('span', params.row.saRiskInfo.riskUnit4)
          }
        }, {//设备
          minWidth: 100,
          title: '设备设施名称',
          align: 'center',
          render: (h, params) => {
            return h('span', params.row.saRiskInfo.equipmentName)
          }
        }, {
          minWidth: 100,
          title: '子系统单元或重要元器件',
          align: 'center',
          render: (h, params) => {
            return h('span', params.row.saRiskInfo.subEqName)
          }
        },//设备
        {
          minWidth: 100,
          title: '人员岗位',
          align: 'center',
          render: (h, params) => {
            return h('span', params.row.saRiskInfo.personnelPosition)
          }
        },
        {
          minWidth: 150,
          title: '作业内容',
          align: 'center',
          render: (h, params) => {
            return h('span', params.row.saRiskInfo.workContent)
          }
        },
        {
          minWidth: 100,
          title: '风险类别',
          align: 'center',
          key: 'riskTypeName',
          render: (h, params) => {
            return h('span', params.row.saRiskInfo.riskTypeName)
          }
        },
        {
          minWidth: 100,
          title: '风险识别维度',
          align: 'center',
          key: 'rikDiscernName',
          render: (h, params) => {
            return h('span', params.row.saRiskInfo.rikDiscernName)
          }
        },
        {
          minWidth: 100,
          title: '风险等级',
          align: 'center',
          key: 'rikRankName',
        },
        {
          minWidth: 100,
          title: '风险警示色',
          align: 'center',
          key: 'rikColor',
        },
        {
          minWidth: 150,
          title: '风险防范措施',
          align: 'center',
          key: 'manageMeasure',
          render: (h, params) => {
            return h('span', params.row.saRiskManage.manageMeasure)
          }
        },
        {
          minWidth: 150,
          title: '应急措施',
          align: 'center',
          key: 'emerMearsure',
          render: (h, params) => {
            return h('span', params.row.saRiskManage.emerMearsure)
          }
        },
      ],
      hiddenDangerVisible: false,
      clickParam: null,
      riskLevelType: "",
      pagedata: {
        fromPage: 1,
        pageSize: 10
      },
      riskLevelTitle: "",
      riskLevelVisible: false,
      loading: false,
      modaleshow: 1,
      meetingTypeMap: {},
      trainingMethodsMap: {},
      evaluationMethodMap: {},
      riskLevelInfo: [],
      AQXZVisible: false,
      ZSSWVisible: false,
      AQJCVisible: false,
      TZZYVisible: false,
      ZSSWColumn: [{
        type: 'expand', width: 30,
        render: (h, params) => {
          return h('Table', {
            props: {
              columns: [
                {title: '伤亡人员姓名', align: 'center', key: 'victim', minWidth: 100,},
                {
                  title: '性别', align: 'center', key: 'gender', minWidth: 80, render: (h, params) => {
                    return h('span', params.row.gender == '0' ? '男' : '女')
                  }
                },
                {title: '年龄', align: 'center', key: 'age', minWidth: 80,},
                {title: '工种或岗位', align: 'center', key: 'position', minWidth: 120,},
                {title: '伤害部位', align: 'center', key: 'injured', minWidth: 120,},
                {title: '就业类型', align: 'center', key: 'membershipName', minWidth: 120,},
                {title: '伤害程度', align: 'center', key: 'injuryLevelName', minWidth: 120,},
                {title: '歇工天数', align: 'center', key: 'daysWork', minWidth: 100,},
                {title: '直接经济损失(万元)', align: 'center', key: 'loseMoney', minWidth: 130,},
              ],//表头
              data: params.row.briefItems,//内部表格展示的数据
            },
          })//我这里使用的是表格，大家也可以根据自己的实际情况更换别的组件
        }
      },
        {
          title: '序号', width: 70, align: 'center',
          render: (h, params) => {
            return h('span', params.index + (this.pagedata.fromPage - 1) * this.pagedata.pageSize + 1);
          }
        },
        {title: '事故名称', align: 'center', key: 'sartName', minWidth: 140,},
        // {title: '伤亡人员姓名', align: 'center', key: 'victim', fixed: 'left', minWidth: 130,},
        {title: '单位', align: 'center', key: 'orgName', minWidth: 200,},
        {title: '伤害程度描述', align: 'center', key: 'injuryLevelDesc', minWidth: 180, tooltip: true},
        // {title: '伤害程度', align: 'center', key: 'injuryLevelName', minWidth: 100,},
        {title: '事故经过', align: 'center', key: 'accDesc', minWidth: 300, tooltip: true},
        {
          title: '事故发生时间', align: 'center', key: 'sartDate', minWidth: 150,
          render: (h, params) => {
            return h('div', [(formatDate(new Date(params.row.sartDate), 'yyyy-MM-dd'))]);
          }
        },
      ],
      AQXZColumn: [
        {
          title: '序号',
          width: 100,
          fixed: 'left',
          align: 'center',
          render: (h, params) => {
            return h('span', params.index + (this.pagedata.fromPage - 1) * this.pagedata.pageSize + 1);
          }
        },
        {key: 'twoLevelGroupName', title: '所属集团', fixed: 'left', align: 'center'},
        {key: 'companyName', title: '被罚款单位', fixed: 'left', align: 'center'},
        {key: 'fineUnitName', title: '罚款单位', align: 'center'},
        {key: 'fineDate', title: '罚款时间', align: 'center', render: this.renderCellDate},
        {key: 'fineMoney', title: '罚款金额（万元）', align: 'center'},
        {key: 'reasonsForFines', title: '罚款事由', align: 'center', ellipsis: true, tooltip: true},
        {key: 'fineDesc', title: '罚款内容描述', align: 'center', ellipsis: true, tooltip: true},
      ],
      AQJCColumn: [{
        title: '序号', width: 80, fixed: 'left', align: 'center', render: (h, params) => {
          return h('span', params.index + (this.pagedata.fromPage - 1) * this.pagedata.pageSize + 1);
        }
      },
        {key: 'companyName', title: '被检查企业', fixed: 'left', align: 'center', width: 200},
        {key: 'belongOrgId', title: '二级集团', fixed: 'left', align: 'center', width: 200},
        {key: 'inspectionTime', title: '检查时间', align: 'center', width: 150, render: this.renderCellDate},
        {key: 'inspectionGroupCategory', title: '检查组别', align: 'center', width: 120},
        {key: 'rummager', title: '检查组人员', align: 'center', width: 200},
        {key: 'issueCount', title: '问题数量', align: 'center', width: 100},
        {key: 'issueCompletionCount', title: '整改完成问题数量', align: 'center', width: 150},
        {key: 'contentIssue', title: '检查内容及发现问题', align: 'center', width: 200, tooltip: true},
        {key: 'issueRectificationRequest', title: '问题及整改要求', align: 'center', width: 200, tooltip: true},
        {key: 'issueCompletion', title: '问题整改完成情况', align: 'center', width: 200, tooltip: true},
        {key: 'issueCompletionTime', title: '整改完成时间', align: 'center', width: 150, render: this.renderCellDate},
        {key: 'createDate', title: '填表时间', align: 'left', width: 120, render: this.renderCellDate}
      ],
      TZZYColumn: [{
        title: '序号', width: 100, align: 'center',
        render: (h, params) => {
          return h('span', params.index + (this.pagedata.fromPage - 1) * this.pagedata.pageSize + 1);
        }
      },
        {minWidth: 150, title: '任务名称', key: 'planName', align: 'center'},
        {minWidth: 150, title: '任务许可证类型', key: 'modelTypeName', align: 'center'},
        {minWidth: 150, title: '所属单位', key: 'belongOrgName', align: 'center'},
        {minWidth: 150, title: '作业单位', key: 'operateOrgName', align: 'center'},
        {minWidth: 150, title: '作业部门', key: 'workDept', align: 'center'},
        {
          minWidth: 150, title: '作业开始时间', key: 'applyStartDate', align: 'center',
          render: (h, params) => {
            return h('div', [
              (formatDate(new Date(params.row.applyStartDate), 'yyyy-MM-dd'))
            ]);
          }
        },
        {
          minWidth: 150, title: '作业结束时间', key: 'applyEndDate', align: 'center',
          render: (h, params) => {
            return h('div', [
              (formatDate(new Date(params.row.applyEndDate), 'yyyy-MM-dd'))
            ]);
          }
        },
        {
          minWidth: 150, title: '状态', key: 'status', align: 'center',
          render: (h, params) => {
            return h('div', [
              (params.row.ptwStatus == '0' ? '未上报' :
                  params.row.ptwStatus == '1' ? '审批中' :
                      params.row.ptwStatus == '2' ? '作业中' :
                          params.row.ptwStatus == '3' ? '已关闭' :
                              params.row.ptwStatus == '4' ? '已过期' : '')
            ]);
          }
        }
      ],
      inspectData1: ['中央环保督察组', '生态环境部', '省厅/直辖市厅', '市局', '区县及以下'],
      inspectData2: ['中央安全督察组', '国家应急部', '省厅/直辖市厅', '市局', '区县及以下'],
      color: ['#ffc400', '#ff6f00', '#00e676', '#03b0fe', '#18ffff'],
      container: {},
      currentType: 0,
    }
  },
  computed: {
    riskLevelColumns() {
      const columns = [...this.riskColumns];
      const modaleshow = this.modaleshow
      const riskLevelColumns = []
      columns.forEach(item => {
        if (modaleshow == 1) {
          if (item.title != '作业内容' && item.title != '人员岗位') {
            riskLevelColumns.push(item)
          }
        } else if (modaleshow == 2) {
          if (item.title != '设备设施名称' && item.title != '人员岗位' && item.title != '子系统单元或重要元器件') {
            riskLevelColumns.push(item)
          }
        } else if (modaleshow == 3) {
          if (item.title != '设备设施名称' && item.title != '作业内容' && item.title != '子系统单元或重要元器件') {
            riskLevelColumns.push(item)
          }
        } else {
          if (item.title != '设备设施名称' && item.title != '作业内容' && item.title != '人员岗位' && item.title != '子系统单元或重要元器件') {
            riskLevelColumns.push(item)
          }
        }
      })
      return riskLevelColumns
    },
  },
  mounted() {
    window.addEventListener('resize', this.pageResize, true);
    this.loadSafeAccident();
    this.loadHiddenDanger();
    this.loadRiskLevel();
    this.loadMap();
    this.loadCockpitCount();
    this.loadCockpitSafeInfo();
    this.loadSafeCockpitInfo();
    this.container = echarts.init(this.$refs.analysisContainer);
    this.$http.get(Api.queryCodeDetailBySortId + '/TRA-000005', {params: {}}).then((res) => {
      this.meetingTypeMap = this.dictListToMap(res.data.data);
    });
    this.$http.get(Api.queryCodeDetailBySortId + '/TRA-000003', {params: {}}).then((res) => {
      this.trainingMethodsMap = this.dictListToMap(res.data.data);
    });
    this.$http.get(Api.queryCodeDetailBySortId + '/TRA-000004', {params: {}}).then((res) => {
      this.evaluationMethodMap = this.dictListToMap(res.data.data);
    });
  },
  methods: {
    ...pageCommonFunction,
    pageResize() {
      this.hiddenDangerContainer.resize();
      this.riskLevelContainer.resize();
      this.safeAccidentContainer.resize();
      this.container.resize();
      this.mapCharts.resize();
    },
    toHideDetail(index) {
      this.companyInfoLists[index].detail.show = false;
    },
    toShowDetail(index) {
      this.companyInfoLists.forEach(item => {
        item.detail.show = false;
      })
      this.companyInfoLists[index].detail.show = true;
    },
    lowerStep(name) {
      this.modaleshow = name
      this.toViewRisk(this.riskLevelType)
    },
    loadSafeCockpitInfo() {
      let date = new Date;
      let user = sessionStorage('userId').getObject('userId');
      let url = Api.querySafeInfoCockpit + date.getFullYear() + '/' + user.companyId;
      this.$http.get(url).then(res => {
        if (res.data.status == 200) {
          this.centerStatisticInfo = res.data.data;
        }
      });
    },
    loadCockpitCount() {
      let date = new Date;
      let user = sessionStorage('userId').getObject('userId');
      let url = Api.cockpitCount + date.getFullYear() + '/' + user.companyId;
      let data = {
        companyName: user.companyName
      }
      this.$http.get(url, {params: data}).then(res => {
        if (res.data.status == 200) {
          this.statisticsInfos = res.data.data;
        }
      });
    },
    loadCockpitSafeInfo() {
      let date = new Date;
      let user = sessionStorage('userId').getObject('userId');
      let url = Api.cockpitSafeInfoCount + date.getFullYear() + '/' + user.companyId;
      this.$http.get(url).then(res => {
        if (res.data.status == 200) {
          this.statisticsInfos = res.data.data;
        }
      });
    },
    loadSafeAccident() {
      this.safeAccidentContainer = echarts.init(this.$refs.safeAccidentContainer);
      this.$http.get(Api.accidentStatistics).then(res => {
        if (res.data.status == 200) {
          let option = this.getSafeAccidentOption();
          option.series[0].data = res.data.data.month;
          this.safeAccidentContainer.setOption(option);
          this.safeAccidentContainer.on('click', (param) => {
            event.stopPropagation()// 阻止冒泡
            this.clickParam = param;
            this.toViewDataStatistic(9);
          });
        }
      });
    },
    getSafeAccidentOption() {
      let option = {
        grid: {
          left: '3%',
          right: '1%',
          top: '5%',
          bottom: '5%',
          containLabel: true
        },
        xAxis: {
          type: 'category',
          data: ['1月', '2月', '3月', '4月', '5月', '6月', '7月', '8月', '9月', '10月', '11月', '12月'],
          axisLine: {
            show: true,
            lineStyle: {
              color: '#4FC3F7'
            },
            interval: 0
          },
          splitLine: {
            show: false,
          },
          axisTick: {
            show: false
          },
          axisLabel: {
            fontSize: 12,
            fontFamily: 'Microsoft YaHei',
            fontWeight: 400,
            color: '#4FC3F7'
          }
        },
        yAxis: {
          type: 'value',
          axisLine: {
            show: true,
            lineStyle: {
              color: '#4FC3F7'
            }
          },
          minInterval: 1,
          splitLine: {
            show: false,
          },
          axisTick: {
            show: false
          },
          axisLabel: {
            fontSize: 12,
            fontFamily: 'Microsoft YaHei',
            fontWeight: 400,
            color: '#02c1fc'
          }
        },
        series: [{
          hoverAnimation: false,
          data: [333, 820, 932, 901, 934, 1290, 1330, 1320, 1400, 1500, 1600, 1700],
          type: 'line',
          smooth: true,
          lineStyle: {
            color: '#FFEA00'
          },
          areaStyle: {
            color: {
              type: 'linear',
              x: 0,
              y: 0,
              x2: 0,
              y2: 1,
              colorStops: [{
                offset: 0, color: 'rgba(255,234,0,0.5)' // 0% 处的颜色
              }, {
                offset: 1, color: 'rgba(255,234,0,0)' // 100% 处的颜色
              }],
              global: false // 缺省为 false
            }
          }
        }]
      }
      return option;
    },
    loadRiskLevel() {
      let _this = this
      let date = new Date;
      let user = sessionStorage('userId').getObject('userId');
      let data = {
        orgId: user.companyId != null ? user.companyId : '18000000',
        year: date.getFullYear()
      }
      this.riskLevelContainer = echarts.init(this.$refs.riskLevelContainer);
      _this.$http.get(Api.riskStaticalList, {params: data}).then((res) => {
        if (res.data.status == 200) {
          let level = [];
          if (res.data.data.data.length > 0) {
            level = [
              {
                name: "红色风险",
                value: res.data.data.data[0].account1
              },
              {
                name: "橙色风险",
                value: res.data.data.data[0].account2
              },
              {
                name: "黄色风险",
                value: res.data.data.data[0].account3,
              },
              {
                name: "蓝色风险",
                value: res.data.data.data[0].account4
              }
            ]
          } else {
            level = [
              {
                name: "红色风险",
                value: 0
              },
              {
                name: "橙色风险",
                value: 0
              },
              {
                name: "黄色风险",
                value: 0,
              },
              {
                name: "蓝色风险",
                value: 0
              }
            ]
          }
          let option3 = this.getRiskLevelOption();
          option3.series[0].data = level;
          this.riskLevelContainer.setOption(option3);
          this.riskLevelContainer.on("click", riskDetails);

          function riskDetails(param) {
            event.stopPropagation() // 阻止冒泡
            _this.riskLevelType = param.name
            _this.pagedata.fromPage = 1
            _this.pagedata.pageSize = 10
            _this.toViewRisk(param.name)
          }
        }
      });
    },
    toViewDataStatistic(type) {
      this.currentType = type;
      this.StatisticsVisible = true;
      this.AQSGVisible = false;
      this.AQXZVisible = false;
      this.ZSSWVisible = false;
      this.AQJCVisible = false;
      this.TZZYVisible = false;
      this.pagedata = {
        total: 0, //总条数
        fromPage: 1,//从n条开始
        pageSize: 10//每页多少条
      };
      if (type == 1) {
        this.AQJCVisible = true;
        this.StatisticsTitle = '政府安全检查详情';
        this.type = 2;
        this.queryJC();
      } else if (type == 2) {
        this.ZSSWVisible = true;
        this.StatisticsTitle = '重伤以上事故详情';
        this.queryZSSW();
      } else if (type == 3) {
        this.AQXZVisible = true;
        this.StatisticsTitle = '安全行政处罚详情';
        this.queryAQXZ();
      } else if (type == 4) {
        this.TZZYVisible = true;
        this.StatisticsTitle = '特种作业详情';
        this.queryTZZY();
      } else if (type == 9) {
        this.AQSGVisible = true;
        this.StatisticsTitle = '安全事故详情';
        this.queryAQSGTJ();
      }
    },
    queryJC() {
      this.loading = true;
      let user = sessionStorage('userId').getObject('userId');
      let date = new Date;
      let url = Api.cockpitCount + '/detail/' + user.companyId + '/' + date.getFullYear() + '/2' + "?startPage=" + this.pagedata.fromPage + "&size=" + this.pagedata.pageSize;
      this.$http.get(url).then((res) => {
        this.pagedata.total = res.data.data.totalSize;
        this.dataTable = res.data.data.data;
        this.loading = false;
      }).catch(e => {
        this.$Message.error("数据获取失败")
      })
      this.$http.get(Api.cockpitCount + 'detail/count/' + user.companyId + '/' + date.getFullYear() + '/2').then((res) => {
        let option = this.getInspectOption(this.type);
        let legend = this.type == 1 ? this.inspectData1 : this.inspectData2;
        let temp = 0;
        legend.forEach(i => {
          res.data.data.forEach(j => {
            if (i == j['codingName']) {
              option.series.push({
                name: j['codingName'],
                type: 'bar',
                label: {
                  normal: {
                    show: true,
                    textBorderColor: '#333',
                    textBorderWidth: 2
                  }
                },
                data: j['count']
              });
              temp = 1;
            }
          });
          if (temp != 1) {
            option.series.push({
              name: i,
              type: 'bar',
              label: {
                normal: {
                  show: true,
                  textBorderColor: '#333',
                  textBorderWidth: 2
                }
              },
              data: [0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0]
            });
            temp = 0;
          }
        })
        this.container.setOption(option);
      }).catch(e => {
        this.$Message.error("数据获取失败")
      })
    },
    queryZSSW() {
      if (this.statisticsInfos.dead > 0) {
        let date = new Date;
        let data = {
          startPage: this.pagedata.fromPage,
          size: this.pagedata.pageSize,
          companyId: sessionStorage('userId').getObject('userId').companyId,
          year: date.getFullYear(),
          procinstState: '3',
          injuryLevels: '1000001019000000002,1000001019000000003,',
          memberships: 'MEM-000001000000001,MEM-000001000000002,MEM-000001000000003,',
          notAccTypeId: 'ACC-000001000000019',  //不包含意外事故
        };
        let url = Api.briefing
        this.$http.get(url, {params: data}).then((res) => {
          this.dataTable = res.data.data.data;
          this.pagedata.total = res.data.data.totalSize;
          this.loading = false;
        }).catch(e => {
          this.$Message.error("数据获取失败")
        });
        this.$http.get(url + '/count', {params: data}).then((res) => {
          if (res.data.status == 200) {
            let option = this.getBriefingOption();
            res.data.data.forEach(item => {
              option.legend.data.push(item['codingName']);
              option.series.push({
                name: item['codingName'],
                type: 'bar',
                label: {
                  normal: {
                    show: true,
                    textBorderColor: '#333',
                    textBorderWidth: 2
                  }
                },
                data: item['count']
              });
            })
            this.container.setOption(option);
          }
        }).catch(e => {
          this.$Message.error("数据获取失败")
        });
      } else {
        this.dataTable = [];
        this.pagedata.total = 0;
        this.loading = false;
      }
    },
    queryAQXZ() {
      if (this.statisticsInfos.furloughNum > 0) {
        this.loading = true;
        let date = new Date();
        let data = {
          startPage: this.pagedata.fromPage,
          size: this.pagedata.pageSize,
          orgId: sessionStorage('userId').getObject('userId').companyId,
          year: date.getFullYear()
        };
        let url = Api.SaAdministrativeSanctionQuery
        this.$http.get(url, {params: data}).then((res) => {
          this.dataTable = res.data.data.data;
          this.pagedata.total = res.data.data.totalSize;
          this.loading = false;
        }).catch(e => {
          this.$Message.error("数据获取失败")
        })
        let countUrl = Api.SaAdministrativeSanctionCount;
        this.$http.get(countUrl, {
          params: {
            orgId: sessionStorage('userId').getObject('userId').companyId,
            year: date.getFullYear()
          }
        }).then((res) => {
          if (res.data.status == 200) {
            let option = this.getMeetingOption();
            option.series.push({
              type: 'bar',
              label: {
                normal: {
                  show: true,
                  textBorderColor: '#333',
                  textBorderWidth: 2
                }
              },
              data: res.data.data
            });
            this.container.setOption(option);
          }
        }).catch(e => {
          this.$Message.error("数据获取失败")
        })
      } else {
        this.dataTable = [];
        this.pagedata.total = 0;
        this.loading = false;
      }
    },
    queryTZZY() {
      this.loading = true;
      let data = {
        startPage: this.pagedata.fromPage,
        size: this.pagedata.pageSize,
        workDate: formatDate(new Date(), "yyyy-MM-dd")
        //   belongOrgName: sessionStorage('userId').getObject('userId').companyName
      };
      let url = Api.getPtwList;
      this.$http.get(url, {params: data}).then((res) => {
        this.dataTable = res.data.data;
        this.pagedata.total = res.data.totalSize;
        this.loading = false;
      }).catch(e => {
        this.$Message.error("数据获取失败")
      })
    },
    queryAQSGTJ() {
      this.loading = true;
      let date = new Date();
      let month = this.clickParam.name == '1月' ? '01' : this.clickParam.name == '2月' ? '02' : this.clickParam.name == '3月' ? '03' : this.clickParam.name == '4月' ? '04' : this.clickParam.name == '5月' ? '05' : this.clickParam.name == '6月' ? '06' : this.clickParam.name == '7月' ? '07' : this.clickParam.name == '8月' ? '08' : this.clickParam.name == '9月' ? '09' : this.clickParam.name == '10月' ? '10' : this.clickParam.name == '11月' ? 11 : this.clickParam.name == '12月' ? 12 : 0;
      let data = {
        startPage: this.pagedata.fromPage,
        size: this.pagedata.pageSize,
        //orgId:sessionStorage('userId').getObject('userId').companyId,
        procinstState: '3',
        year: date.getFullYear() + "-" + month
      };
      let url = Api.briefing
      this.$http.get(url, {params: data}).then((res) => {
        this.dataTable = res.data.data.data;
        this.pagedata.total = res.data.data.totalSize;
        this.loading = false;
      }).catch(e => {
        this.$Message.error("数据获取失败")
      })
    },
    getInspectOption() {
      let option = {
        color: this.color,
        legend: {
          data: this.type == 1 ? this.inspectData1 : this.inspectData2
        },
        xAxis: [
          {
            type: 'category',
            axisTick: {show: false},
            data: ['1月', '2月', '3月', '4月', '5月', '6月', '7月', '8月', '9月', '10月', '11月', '12月']
          }
        ],
        yAxis: [
          {
            type: 'value'
          }
        ],
        series: []
      };
      return option;
    },
    toViewRisk(name) {
      this.riskLevelTitle = name === '红色风险' ? '风险等级(重大)' :
          name === '橙色风险' ? '风险等级(较大)' :
              name === '蓝色风险' ? '风险等级(低)' :
                  name === '黄色风险' ? '风险等级(一般)' : '';
      this.riskLevelVisible = true;
      this.loading = true;
      let date = new Date();
      let url = ''
      if (this.modaleshow == 1) {
        url = Api.equipmentFacilitiesRiskApprovalList
      } else if (this.modaleshow == 2) {
        url = Api.workProcessRiskApprovalList
      } else if (this.modaleshow == 3) {
        url = Api.personnelJobRiskApprovalList
      } else if (this.modaleshow == 4) {
        url = Api.environmentalRiskApprovalList
      }
      let data = {
        startPage: this.pagedata.fromPage,
        size: this.pagedata.pageSize,
        auditState: '2',
        orgId: sessionStorage('userId').getObject('userId').companyId,
        rikRankId: name === '红色风险' ? '重大' :
            name === '橙色风险' ? '较大' :
                name === '蓝色风险' ? '低' :
                    name === '黄色风险' ? '一般' : '',
        year: date.getFullYear()
      }
      data = Object.assign(data);
      this.$http.get(url, {params: data}).then((res) => {
        res.data.data.data.forEach(item => {
          const sty = item.rikColor == '红' ? 'table-info-cell-red' : item.rikColor == '橙' ? 'table-info-cell-orage' : item.rikColor == '黄' ? 'table-info-cell-yellow' : item.rikColor == '蓝' ? 'table-info-cell-blue' : ''
          item.cellClassName = {rikColor: sty}
        })
        this.riskLevelInfo = res.data.data.data;
        this.pagedata.total = res.data.data.totalSize;
        this.loading = false;
      }).catch(e => {
        this.$Message.error("数据获取失败")
        this.loading = false;
        this.pagedata.total = 0
      })
    },
    sizeChange(size) {
      this.pagedata.pageSize = size
      this.pagedata.fromPage = 1
      if (this.currentType == 1)
        this.query()
    },
    pageChange(pagenum) {
      this.pagedata.fromPage = pagenum
      if (this.currentType == 1)
        this.query()
    },
    query() {
      if (this.AQSGVisible == true) {
        this.queryAQSGTJ();
      }
      if (this.AQXZVisible == true) {
        this.queryAQXZ();
      }
      if (this.ZSSWVisible == true) {
        this.queryZSSW();
      }
      if (this.AQJCVisible == true) {
        this.queryJC();
      }
      if (this.TZZYVisible == true) {
        this.queryTZZY();
      }
    },
    sizeChangeRisk(size) {
      this.pagedata.pageSize = size
      this.toViewRisk(this.riskLevelType)
    },
    pageChangeRisk(pagenum) {
      this.pagedata.fromPage = pagenum
      this.toViewRisk(this.riskLevelType)
    },
    hdPageSizeChange(pageSize) {
      this.pagedata.pageSize = pageSize;
      this.queryHiddenDanger();
    },
    hdPageChange(pageNum) {
      this.pagedata.fromPage = pageNum;
      this.queryHiddenDanger();
    },
    loadMap() {
      this.mapCharts = echarts.init(this.$refs.mapContainer);
      this.$http.get('./json/china.json').then((res) => {
        echarts.registerMap('chinaMap', res.data)
        this.mapChartOption = {
          tooltip: {
            show: false,
          },
          geo: {
            aspectScale: 0.85,
            zoom: 1.2,
            map: 'china',
            itemStyle: {					// 定义样式
              normal: {					// 普通状态下的样式
                areaColor: this.horlinear(
                    '#2F6FB5',
                    '#2CA1A7'
                ),
                borderColor: '#111'
              },
            }
          },
          series: [
            {
              data: [],
              type: 'effectScatter',
              coordinateSystem: 'geo',
              rippleEffect: {
                scale: 1
              },
              itemStyle: {
                normal: {
                  color: "#4CC6BF", //地图各地区的点和文字的颜色
                  shadowBlur: 1,
                  shadowColor: "#4EA895" //地图各地区的点的阴影颜色
                }
              }
            }
          ]
        }
        this.mapCharts.setOption(this.mapChartOption)
        this.$http.get(Api.queryCockpitCompanyInfo + "/safe/" + sessionStorage('userId').getObject('userId').companyId).then(res1 => {
          let dataList = [];
          /*获取地图中已有的省、直辖市和特别行政区*/
          echarts.getMap("chinaMap").geoJson.features.forEach((item) => {
            dataList.push({
              // 地区名称
              name: item.properties.name,
              // 地区经纬度
              value: item.properties.center,
            });
          });
          res1.data.data.forEach(item2 => {
            dataList.forEach(item1 => {
              if (item1.name == item2.area) {
                item1.detail = item2;
                this.mapChartOption.series[0].data.push(item1);
                this.companyInfoLists.push(item1);
              }
            })
          })
          this.mapCharts.setOption(this.mapChartOption)
        })
      }).catch(e => {
      })
    },
    loadHiddenDanger() {
      this.hiddenDangerContainer = echarts.init(this.$refs.hiddenDanger);
      let hiddenDangerOption = this.getHiddenDangerOption();
      let user = sessionStorage('userId').getObject('userId');
      let data = {
        orgId: user.companyId != null ? user.companyId : '-1',
        month: formatDate(new Date(), 'yyyy-MM'),
        lastMonth: this.getLastMonth(new Date(), 'yyyy-MM'),
      }
      this.$http.get(Api.apsgInverstigation + '/count/all', {params: data}).then(res => {
        let seriesData = [res.data[0]['count'], res.data[1]['count'], res.data[2]['count'], res.data[3]['count']];
        hiddenDangerOption.series[0].data = seriesData;
        this.hiddenDangerContainer.setOption(hiddenDangerOption);
        this.hiddenDangerContainer.on('click', (param) => {
          event.stopPropagation()// 阻止冒泡
          this.clickParam = param;
          this.hiddenDangerTitle = param.name;
          this.hiddenDangerVisible = true;
          this.queryHiddenDanger();
        });
      })
    },
    queryHiddenDanger() {
      let user = sessionStorage('userId').getObject('userId');
      this.loading = true;
      let data2 = {
        type: this.clickParam.name == '本期上报' ? '1' : this.clickParam.name == '本期消除' ? '2' : this.clickParam.name == '本期未消除' ? '3' : this.clickParam.name == '上期未消除' ? 4 : 0,
        orgId: user.companyId != null ? user.companyId : '-1',
        month: formatDate(new Date(), 'yyyy-MM'),
        lastMonth: this.getLastMonth(new Date(), 'yyyy-MM'),
        startPage: this.pagedata.fromPage,
        pageSize: this.pagedata.pageSize,
        companyName: user.companyName,

      }
      this.$http.get(Api.apsgInverstigation + '/count/detail', {params: data2}).then(r => {
        this.hiddenDangerInfo = r.data.data;
        this.pagedata.total = r.data.totalSize;
        this.loading = false;
      });
    },
    getHiddenDangerOption() {
      let option = {
        color: ['red', 'yellow'],
        tooltip: {
          trigger: 'axis',
          axisPointer: {
            type: 'shadow'
          }
        },
        grid: {
          top: '20%',
          left: '3%',
          right: '4%',
          bottom: '1%',
          containLabel: true
        },
        xAxis: [
          {
            type: 'category',
            data: ['本期上报', '本期消除', '本期未消除', '上期未消除'],
            axisTick: {show: false},
            splitLine: {show: false},
            axisLine: {
              show: true,
              lineStyle: {
                color: '#4FC3F7'
              },
            },
            axisLabel: {
              fontSize: 14,
              fontFamily: 'Microsoft YaHei',
              fontWeight: 400,
              color: '#A7C2FA',
              opacity: 0.8
            }
          }
        ],
        yAxis: [
          {
            type: 'value',
            axisTick: {show: true},
            axisLine: {
              show: true,
              lineStyle: {
                color: '#4FC3F7'
              }
            },
            splitLine: {show: false},
            axisLabel: {
              fontSize: 12,
              fontFamily: 'Microsoft YaHei',
              fontWeight: 400,
              color: '#4FC3F7'
            }
          }
        ],
        animation: true,
        series: [
          {
            type: 'bar',
            barGap: 0,
            barWidth: 18,
            barCategoryGap: '50%',
            data: [320, 332, 301, 334, 390, 200, 150],
            emphasis: {
              barBorderRadius: 40
            },
            itemStyle: { // 柱子样式
              //柱形图圆角，初始化效果
              barBorderRadius: [10, 10, 0, 0],
              color: {
                type: 'linear',
                x: 0,
                y: 0,
                x2: 1,
                y2: 1,
                colorStops: [{
                  offset: 0, color: '#04BCEC' // 0% 处的颜色
                }, {
                  offset: 1, color: '#4AE5D0' // 100% 处的颜色
                }],
                global: false // 缺省为 false
              }
            },
          },
        ]
      };
      return option;
    },
    getRiskLevelOption() {
      let option = {
        tooltip: {
          trigger: 'item',
          formatter: '{a} <br/>{b}: {c} ({d}%)'
        },
        color: [this.linear(
            '#F47270',
            '#BF0404'
        ), this.linear(
            '#E65100',
            '#FB8C00'
        ), this.linear(
            '#FFE082',
            '#FFB300'
        ), this.linear(
            '#28A5D7',
            '#4750FB'
        )],
        series: [
          {
            name: '风险级别',
            type: 'pie',
            minAngle: 20,
            radius: ['60%', '80%'],
            center: ['50%', '50%'],
            label: {
              formatter: '{c}',
              color: 'inherit'
            },
            itemStyle: {
              normal: {
                borderRadius: 10,
                borderColor: '#000',
                borderWidth: 6,
              }
            },
            data: [],
            emphasis: {
              itemStyle: {
                shadowBlur: 10,
                shadowOffsetX: 0,
                shadowColor: 'rgba(210, 30, 0, 0.5)'
              }
            }
          },
        ]
      };
      return option;
    },
    getBriefingOption() {
      let option = {
        color: this.color,
        legend: {
          data: []
        },
        xAxis: [
          {
            type: 'category',
            axisTick: {show: false},
            data: ['1月', '2月', '3月', '4月', '5月', '6月', '7月', '8月', '9月', '10月', '11月', '12月']
          }
        ],
        yAxis: [
          {
            type: 'value'
          }
        ],
        series: []
      };
      return option;
    },
    getMeetingOption() {
      let option = {
        color: this.color,
        legend: {
          data: []
        },
        xAxis: [
          {
            type: 'category',
            axisTick: {show: false},
            data: ['1月', '2月', '3月', '4月', '5月', '6月', '7月', '8月', '9月', '10月', '11月', '12月']
          }
        ],
        yAxis: [
          {
            type: 'value'
          }
        ],
        series: []
      };
      return option;
    },
    linear(startColor, endColor) {
      // 4个方位参数依次为右、下、左、上，（0 0 0 1）代表从正上方开始
      // 数组, 用于配置颜色的渐变过程. 每一项为一个对象, 包含offset和color两个参数. offset的范围是0 ~ 1, 用于表示位置
      return {
        type: 'linear',
        x: 0,
        y: 0,
        x2: 0,
        y2: 1,
        colorStops: [{
          offset: 0, color: startColor // 0% 处的颜色
        }, {
          offset: 1, color: endColor // 100% 处的颜色
        }],
        globalCoord: false // 缺省为 false
      }
    },
    horlinear(startColor, endColor) {
      // 4个方位参数依次为右、下、左、上，（0 0 0 1）代表从正上方开始
      // 数组, 用于配置颜色的渐变过程. 每一项为一个对象, 包含offset和color两个参数. offset的范围是0 ~ 1, 用于表示位置
      return {
        type: 'linear-gradient',
        x: 0,
        y: 1500,
        x2: 1000,
        y2: 0,
        colorStops: [{
          offset: 0.5, color: startColor // 0% 处的颜色
        }, {
          offset: 1, color: endColor // 100% 处的颜色
        }],
        global: true // 缺省为 false
      }
    },
    toViewVideo(type) {
      let user = sessionStorage('userId').getObject('userId');
      if (type == 1 && (user.companyId == "10010000" || user.companyId == "18000000")) {
        window.open('http://ycjk.jdsn.cn?' + this.encrypt("logFlag=" + sessionStorage('userId').getObject('userId').loginId + ":pwd=JYjt@richfit_202"), '_blank')
      } else if (type == 2 && (user.companyId == "18000050" || user.companyId == "18000000")) {
        window.open('http://183.242.54.25:8081/cpess/api/v1/user/sso/login?' + this.encrypt("logFlag=" + sessionStorage('userId').getObject('userId').loginId + ":pwd=JYjt@richfit_202"), '_blank')
      } else if (type == 3 && (user.companyId == "10000000" || user.companyId == "18000000")) {
        window.open('http://10.132.6.10:8086/scmp/index.html#/video?' + this.encrypt("logFlag=" + sessionStorage('userId').getObject('userId').loginId + ":pwd=JYjt@richfit_202"), '_blank')
      } else if (type == 4 && (user.companyId == "18001000" || user.companyId == "18000000")) {
        window.open('http://106.116.71.150:8001')
      } else if (type == 5 && (user.companyId == "18003000" || user.companyId == "18000000")) {
        window.open('https://vss.jyipm.com:1833/jinyu-web/?' + this.encrypt("logFlag=" + sessionStorage('userId').getObject('userId').loginId + ":pwd=JYjt@richfit_202"), '_blank')
      } else if (type == 6 && (user.companyId == "18002000" || user.companyId == "18000000")) {
        window.open('https://gc.dc-bbmg.com.cn/api/v2/token/bjyjt/iot-jump?code=' + this.encrypt(sessionStorage('userId').getObject('userId').loginId + ":pwd=JYjt@richfit_202"), '_blank')
      } else if (type == 7 && (user.companyId == "18004000" || user.companyId == "18000000")) {
        window.open('http://aq.ctbmg.com:8064/scmp/index.html#/safe/video?' + this.encrypt("logFlag=" + sessionStorage('userId').getObject('userId').loginId + ":pwd=JYjt@richfit_202"), '_blank')
      } else if (type == 8 && (user.companyId == "18005059" || user.companyId == "18000000")) {
        window.open(' http://61.51.45.26:8086/scmp/index.html#/safe/video?' + this.encrypt("logFlag=" + sessionStorage('userId').getObject('userId').loginId + ":pwd=JYjt@richfit_202"), '_blank')
      }
    },
    encrypt(word) {
      let keyHex = CryptoJS.enc.Utf8.parse('bbmg_BBMG');
      let option = {mode: CryptoJS.mode.ECB, padding: CryptoJS.pad.Pkcs7}
      let encrypted = CryptoJS.DES.encrypt(word, keyHex, option)
      return encrypted.ciphertext.toString()
    },
    getLastMonth(date, fmt) {
      if (typeof date == 'string') {
        return date;
      }
      if (!fmt) fmt = "yyyy-MM-dd hh:mm:ss";
      if (!date || date == null) return null;
      let month = 0;
      if (date.getMonth() == 0) {
        date = new Date(date.getFullYear() - 1, 12, 1);
        date.getMonth() + 1;
      } else {
        month = date.getMonth();
      }
      let o = {
        'M+': month, // 月份
        'd+': date.getDate(), // 日
        'h+': date.getHours(), // 小时
        'm+': date.getMinutes(), // 分
        's+': date.getSeconds(), // 秒
        'q+': Math.floor((date.getMonth() + 3) / 3), // 季度
        'S': date.getMilliseconds() // 毫秒
      }
      if (/(y+)/.test(fmt)) fmt = fmt.replace(RegExp.$1, (date.getFullYear() + '').substr(4 - RegExp.$1.length))
      for (let k in o) {
        if (new RegExp('(' + k + ')').test(fmt)) fmt = fmt.replace(RegExp.$1, (RegExp.$1.length === 1) ? (o[k]) : (('00' + o[k]).substr(('' + o[k]).length)))
      }
      return fmt
    },
    convertMain(Lng, lat) {
      let getModel = this.mapCharts.getModel().getSeries()[0];
      let seriesModel = this.mapCharts.getModel().getSeriesByIndex(0)
      let coordSys = seriesModel.coordinateSystem;
      let point = coordSys.dataToPoint([Lng, lat]);
      let resPoint = [point[0] - 125, point[1] - 150];
      return resPoint;
    },
    convertMain2(Lng, lat) {
      let getModel = this.mapCharts.getModel().getSeries()[0];
      let seriesModel = this.mapCharts.getModel().getSeriesByIndex(0)
      let coordSys = seriesModel.coordinateSystem;
      let point = coordSys.dataToPoint([Lng, lat]);
      let resPoint = [point[0] - 25, point[1] - 10];
      return resPoint;
    },
    renderCellDate(h, params) {
      let key = params.column.key;
      if (!params.row[key]) return "";
      return h('span', formatDate(new Date(params.row[key]), "yyyy-MM-dd"))
    },
  }
}
</script>

<style scoped>

.page {
  background-image: url(../../../assets/safeControlCabin/background.jpg);
  background-size: 100% 100%;
  display: flex;
  flex-direction: column;
  width: 100%;
  height: 100vh;
  overflow: hidden;
}

.head {
  background-image: url(../../../assets/safeControlCabin/head.png);
  background-size: 100% 100%;
  height: 71px;
  width: 100%;
}

.content {
  display: flex;
  flex: auto;
}

.leftPage {
  display: flex;
  flex-direction: column;
  margin-left: 4%;
  width: 25%;
}

.leftPageTop {
  height: 41%;
}

.leftPageBottom {
  height: 41%;
}

.centerPage {
  width: 41%;
}

.rightPage {
  display: flex;
  flex-direction: column;
  width: 25%;
}

.titlePClass {
  margin-top: 5%;
  background-image: url(../../../assets/safeControlCabin/title.png);
  background-size: 100% 100%;
  text-align: center;
  font-size: 1.5rem;
  font-family: Microsoft YaHei;
  font-weight: 400;
  color: #00E5FF;
}

.topStatisticDiv {
  margin-top: 5%;
  display: flex;
  justify-content: space-around;
  height: 30%;
}

.bottomStatisticDiv {
  margin-top: 5%;
  display: flex;
  justify-content: space-around;
  height: 30%;
}

.singleStatisticDiv {
  display: flex;
  justify-content: center;
  width: 50%;
}

.singleStatisticDiv > .statisticsInfo {
  display: flex;
  flex-direction: column;
  justify-content: space-around;
  padding-bottom: 10px;
  cursor: pointer;
}

.singleStatisticDiv > .statisticsInfo > .title {
  font-size: 1rem;
  font-family: Microsoft YaHei;
  font-weight: 400;
  color: #FFFFFF;
}

.singleStatisticDiv > .statisticsInfo > .num {
  font-size: 2rem;
  line-height: 2rem;
  font-family: Microsoft YaHei;
  font-weight: 400;
  color: #55C9FD;
}

.shiguStatisticDiv {
  width: 100%;
  height: 70%;
}

.centerPageHead {
  display: flex;
  justify-content: space-around;
  margin-top: 5%;
  padding-left: 10%;
  padding-right: 10%;
}

.singleCenterPageHead {
  background-image: url(../../../assets/safeControlCabin/centerHead.png);
  background-size: 120px 80px;
  width: 120px;
  height: 80px;
}

.singleCenterPageHead > div > .num {
  font-size: 2rem;
  line-height: 2rem;
  font-family: Digiface;
  font-weight: 400;
  color: #FFFFFF;
  text-align: center;
}

.singleCenterPageHead > .title {
  font-size: 1rem;
  font-family: PingFang SC;
  font-weight: 600;
  color: #66EEFC;
  text-align: center;
}

.centerPageCenter {
  margin-top: 5%;
  height: 50%;
  position: relative;
}

.centerPageCenter > .centerPageCenterDialog {
  position: absolute;
  display: flex;
  flex-direction: column;
  align-items: center;
  cursor: pointer;
}

.centerPageCenter > .centerPageCenterDialog > .imgClass {
  z-index: 700;
  width: 27px;
  height: 26px;
}

.centerPageCenter > .centerPageCenterDialog > .detailMap {
  z-index: 800;
  width: 250px;
  height: 140px;
  background: #02091D;
  opacity: 0.7;
  border-bottom: 4px solid #F44336;
  border-top: 4px solid #F44336;
  display: flex;
  flex-direction: column;
  justify-content: space-around;
  align-items: center;
}

.centerPageCenter > .centerPageCenterDialog > .detailMap > .company {
  text-align: center;
  font-size: 0.9rem;
  font-family: Microsoft YaHei;
  font-weight: 400;
  color: #F44336;
}

.centerPageCenter > .centerPageCenterDialog > .detailMap > .title {
  text-align: center;
  font-size: 0.9rem;
  font-family: Microsoft YaHei;
  font-weight: 400;
  color: #FFFFFF;
}

.centerPageFooter {
  height: 20%;
  display: flex;
  justify-content: space-around;
}

.centerPageFooterImg {
  display: flex;
  flex-direction: column;
  align-items: center;
  cursor: pointer;
}

.centerPageFooterImg > p {
  margin-top: 10px;
  font-size: 1rem;
  font-family: PingFang SC;
  font-weight: 600;
  color: #66EEFC;
}
</style>